<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/7/1
  Time: 17:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>班级管理</title>
    <style>
        /* 设置表格宽度 */
        table {
            width: 100%;
            border-collapse: collapse;
        }

        /* 设置单元格边框和内边距 */
        td, th {
            border: none;
            padding: 10px;
            text-align: center;
        }

        /* 设置表头样式 */
        th {
            background-color: #f2f2f2;
        }

        /* 使用nth-child选择器设置奇数行背景颜色 */
        tr:nth-child(odd) {
            background-color:pink; /* 浅灰色或其他颜色 */
        }

        table {
            width: 80%; /* 或者设置一个具体的宽度值，如 80% */
            border-collapse: collapse;
            margin-top: 20px; /* 上下外边距为20px，左右外边距自动，使表格水平居中 */
            margin-left: 130px;
        }
        input{
            width:120px;
            height: 25px;
            padding-right: 20px;
        }
        a{
            text-decoration: none;
        }
        /*a:hover {*/
        /*  color: black;*/
        /*}*/
        form{
            padding-top: 20px;
        }
        body{
            background-image: url("image/2.jpg");
        }
    </style>
</head>
<body>
<div style="width: 100%;height: 40px;background-color:pink">
    <h3 style="color:white;padding-left: 20px;padding-top: 8px;"><a href="firstpage.jsp" style="color:white;"onmouseover="this.style.color='black';" onmouseout="this.style.color='white';">首页</a>/班级管理</h3>
</div>
 <div style="width: 100%;height: 20px;background-color:paleturquoise"> </div>

<form id="addForm" style="text-align: right">
    <input type="text" id="classesId" placeholder="班级号">
    <input type="text" id="classesName" placeholder="班级名">
    <input type="text" id="college" placeholder="所属学院">
    <button type="button" onclick="addClass()"
            style=" color:white;
            background-color:dodgerblue;
            font-size: 16px;
            width: 80px;
            height: 25px;">添加</button>
</form>

<table>
    <thead>
    <tr>
        <th>班级号</th>
        <th>班级名</th>
        <th>所属学院</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>张三</td>
        <td>zhangsan@example.com</td>
        <td>30</td>
        <td>
            <button type="button" onclick="editRow(this)">修改</button>
            <button type="button" onclick="deleteRow(this)">删除</button>
            <a href="students.jsp" style="color:darkgray;font-size: 18px;padding-left: 10px;padding-right: 10px"onmouseover="this.style.color='black';" onmouseout="this.style.color='darkgray';">学生详情</a>
        </td>
    </tr>
    <tr>
        <td>李四</td>
        <td>lisi@example.com</td>
        <td>25</td>
        <td>
            <button type="button" onclick="editRow(this)">修改</button>
            <button type="button" onclick="deleteRow(this)">删除</button>
            <a href="students.jsp" style="color:darkgray;font-size: 18px;padding-left: 10px;padding-right: 10px"onmouseover="this.style.color='black';" onmouseout="this.style.color='darkgray';">学生详情</a>
        </td>
    </tr>
    <tr>
        <td>王五</td>
        <td>wangwu@example.com</td>
        <td>35</td>
        <td>
            <button type="button" onclick="editRow(this)">修改</button>
            <button type="button" onclick="deleteRow(this)">删除</button>
            <a href="students.jsp" style="color:darkgray;font-size: 18px;padding-left: 10px;padding-right: 10px"onmouseover="this.style.color='black';" onmouseout="this.style.color='darkgray';">学生详情</a>
        </td>
    </tr>
    </tbody>
</table>
<div style="width: 100%;height: 60px;background-color:paleturquoise;position: fixed; bottom: 0; "> </div>
<script>

    function editRow(button) {
        const actionCell = button.closest('td');
        const row = actionCell.parentElement;
        const cells = Array.from(row.cells);

        cells.forEach((cell, index) => {
            if (index !== cells.length - 1) { // 排除最后一个单元格
                const input = document.createElement('input');
                input.value = cell.textContent;
                cell.innerHTML = '';
                cell.appendChild(input);
            }
        });

        // 可选：添加失去焦点时的事件监听器来保存数据
        cells.forEach((cell, index) => {
            if (index !== cells.length - 1) { // 排除最后一个单元格
                cell.firstChild.addEventListener('blur', function () {
                    // 这里可以编写保存数据的逻辑
                    console.log('编辑完成，新内容为：', this.value);
                    cell.textContent = this.value;
                }, {once: true});
            }
        });
    }
    function deleteRow(button) {
        // 找到包含按钮的行
        const row = button.closest('tr');
        // 从表格中删除行
        row.parentNode.removeChild(row);
        // 这里可以添加额外的逻辑，例如发送请求到服务器删除数据
    }
    function addClass() {
        // 获取表单输入值
        var classesId = document.getElementById('classesId').value;
        var classesName = document.getElementById('classesName').value;
        var college = document.getElementById('college').value;

        // 验证输入（这里只是简单的非空验证，实际可能需要更复杂的验证）
        if (classesId === '' || classesName === '' || college === '') {
            alert('请填写所有字段！');
            return;
        }

        // 创建新的表格行和单元格
        var tableBody = document.querySelector('table tbody');
        var newRow = tableBody.insertRow(-1); // 在表格末尾插入新行

        // 创建并添加单元格
        var cellId = newRow.insertCell(0);
        var cellName = newRow.insertCell(1);
        var cellCollege = newRow.insertCell(2);
        var cellButtons = newRow.insertCell(3); // 用于添加修改和删除按钮的单元格

        // 填充单元格内容
        cellId.textContent = classesId;
        cellName.textContent = classesName;
        cellCollege.textContent = college;

        // 添加修改和删除按钮
        var editButton = document.createElement('button');
        editButton.type = 'button';
        editButton.textContent = '修改';
        editButton.onclick = function () {
            // 在这里实现修改行的逻辑
            alert('点击了修改按钮，需要修改的行是: ' + cellId.textContent);
        };

        var deleteButton = document.createElement('button');
        deleteButton.type = 'button';
        deleteButton.textContent = '删除';
        deleteButton.onclick = function () {
            // 删除当前行
            tableBody.removeChild(newRow);
        };
        var studentDetailLink = document.createElement('a');
        studentDetailLink.href = "students.jsp";
        studentDetailLink.style.color = 'darkgray';
        studentDetailLink.style.fontSize = '18px';
        studentDetailLink.style.paddingLeft = '10px';
        studentDetailLink.style.paddingRight = '10px';
        studentDetailLink.textContent = '学生详情';

        studentDetailLink.onmouseover = function() {
            this.style.color = 'black';
        };

        studentDetailLink.onmouseout = function() {
            this.style.color = 'darkgray';
        };

        // 将按钮添加到单元格中
        cellButtons.appendChild(editButton);
        cellButtons.appendChild(document.createElement('span')).textContent = ' '; // 添加空格分隔按钮
        cellButtons.appendChild(deleteButton);
        cellButtons.appendChild(studentDetailLink);

        // 清空表单
        document.getElementById('addForm').reset()


      };
</script>


</body>
</html>
